<template>
  <div class="test-container">
    <template v-if="table && table.length > 0">
      <el-card
        v-for="item in table"
        :key="item.id"
        header="考试信息"
        style="margin-bottom: 20px; width: 100%"
      >
        <div
          style="
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            line-height: 2;
            overflow-x: auto;
          "
        >
          <div style="display: flex; flex-direction: row">
            <div style="width: 350px">
              <span>试卷标题：{{ item.title }}</span>
              <span style="display: block">题目数量：{{ item.number }}</span>
              <span style="display: block"
                >考试科目：{{ getSubjectName(item.subjectId) }}</span
              >
              <span style="display: block"
                >过期时间：{{ item.expiredTime }}</span
              >
            </div>
            <div style="width: 300px; margin-left: 20px">
              <span style="display: block"
                >考试时间：{{ item.testTime / 60 }}分钟</span
              >
              <span style="display: block">创建人：{{ item.userName }}</span>
              <span style="display: block"
                >创建时间：{{ item.createTime }}</span
              >
            </div>
          </div>
          <div class="start-exam-button" @click="startExam(item)">
            <el-icon><Management /></el-icon>
            开始考试
          </div>
        </div>
      </el-card>
    </template>

    <el-empty v-else description="暂无试卷" :image-size="200">
      <template #description>
        <span v-if="getToken()" style="color: #909399"
          >没有试卷</span
        >
        <to-login v-else icon="HomeFilled" text="请先登录" path="/login" />
      </template>
    </el-empty>

    <el-pagination
      v-if="table && table.length > 0"
      background
      layout="prev, pager, next"
      :page-count="pageCount"
      :current-page="currentPage"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { ref, onBeforeMount, reactive } from "vue";
import router from "@/router";
import { useStore } from "vuex";
import questionItemApi from "@/api/questionItem/questionItem";
import subjectApi from "@/api/subject/index";
import ToLogin from "@/components/toLogin.vue";
import { getToken } from "@/utils/auth";

const table = ref([]);
const store = useStore();

const form = reactive({
  title: "",
});
const currentPage = ref(1);
const pageSize = ref(5);
const pageCount = ref(0);
const subjects = ref([]);

const handleCurrentChange = async function (val) {
  currentPage.value = val;
  await list(currentPage.value);
};

const search = async function () {
  list(1);
};

const list = async function (currentPage) {
  const res = await questionItemApi.selectQuestionItems(
    form.title,
    currentPage,
    pageSize.value
  );
  pageCount.value = Math.ceil(res.data.total / pageSize.value);
  table.value = res.data.records;
};

const getSubject = async () => {
  const res = await subjectApi.getAll();
  subjects.value = res.data;
};

const getSubjectName = (subjectId) => {
  const subject = subjects.value.find((s) => s.id === subjectId);
  return subject ? subject.name : "未知科目";
};

const startExam = (item) => {
  router.push({
    path: `/test/startTest`,
    query: { questionItemId: item.id, title: item.title },
  });
};

onBeforeMount(() => {
  if (store.getters.roles.includes("student")) {
    list(1);
    getSubject();
  }
});
</script>

<style scoped>
.test-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  padding: 10px;
  width: 100%;
}

.start-exam-button {
  min-width: 100px;
  height: 30px;
  background-color: rgb(64, 158, 255);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 5px;
  color: white;
  font-size: 14px;
  margin-top: 80px;
}

.start-exam-button:hover {
  background-color: rgb(64, 191, 214);
  cursor: pointer;
}
</style>
